<template>
    <div class="detail_r">
        <div class="video_dec">
            <h3 class="title">
                <span>视频介绍</span>
            </h3>
            <p class="time">发布时间：{{ publishTime | showDate }}</p>
            <p class="count">播放次数：{{ playTime | handleCount }}次</p>
            <p class="desc">{{ description }}</p>
        </div>
        <div class="video_list">
            <h3 class="title">
                <span>相关推荐</span>
            </h3>
            <ul>
                <li v-for="item in videoList" :key="item.vid">
                    <div class="pic" @click="$router.push(`/videolist/${item.vid}`)">
                        <img :src="item.coverUrl" alt="">
                        <i class="mask"></i>
                        <div class="paly tanxin">
                            <i class="video"></i>
                            <span class="count">{{ item.playTime | handleCount }}</span>
                        </div>
                    </div>
                    <div class="info">
                        <h4 :title="item.title" class="ellipsis" @click="$router.push(`/videolist/${item.vid}`)">{{ item.title }}</h4>
                        <p class="time">{{ min(item) }}:{{ sec(item) }}</p>
                        <p class="user ellipsis">
                            <span>by</span>
                            <a :title="item1.userName" v-for="(item1, index) in item.creator" :key="index" @click="$router.push(`/user/${item1.userId}`)">{{ item1.userName }}<em>、</em></a>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="menu">
            <h3 class="title">
                <span>用户wiki</span>
            </h3>
            <p>
                <img src="@/assets/images/public/edit.png" alt="">
                <span>补充或修改艺人资料</span>
            </p>
            <p>
                <img src="@/assets/images/public/text.png" alt="">
                <span>用户wiki任务中心</span>
            </p>
        </div>
        <div class="more">
            <h3 class="title">
                <span>了解更多 &gt;&gt;</span>
            </h3>
            <ul class="bg">
                <li><a class="ios"></a></li>
                <li><a class="pc"></a></li>
                <li><a class="aos"></a></li>
            </ul>
            <p>同步歌单，随时畅听320k好音乐</p>
        </div>
    </div>
</template>

<script>
import { VideoDetailApi, RelatedVideoApi } from '@/request/api';
import { formatDate } from '@/assets/utils/date';
export default {
    data () {
        return {
            videoList: [],
            publishTime: 0,
            playTime: 0,
            description: "",
        }
    },
    filters: {
        showDate: function(value) {
          let date = new Date(value);
          // return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
          return formatDate(date, 'yyyy-MM-dd');
        },
        handleCount(count){
            if(count >= 10000){
                count = (count - count%1000)/10000 + '万'
            }else if(count >= 1000){
                count = (count - count%100)/1000 + '千'
            }
            return count
        }
    },
    computed: {
        id() {
          return this.$route.params.id;
        },
    },
    created() {
        VideoDetailApi(this.id).then((res) => {
            // console.log(res);
            this.publishTime = res.data.data.publishTime;
            this.playTime = res.data.data.playTime;
            this.description = res.data.data.description;
        });
        RelatedVideoApi(this.id).then((res) => {
            // console.log(res);
            this.videoList = res.data.data;
        });
    },
    methods: {
        min(item) {
          if (parseInt(item.durationms / 60000) < 10)
          return "0" + parseInt(item.durationms / 60000);
          else return parseInt(item.durationms / 60000);
        },
        sec(item) {
          let x = parseInt(item.durationms / 60000);
          let y = parseInt(item.durationms / 1000 - x * 60);
          if (y < 10) return "0" + y;
          else return y;
        },
    }
}
</script>
 
<style lang = "less" scoped>
.detail_r {
    width: 240px;
    background-color: #fff;
    border-right: 1px solid #D7D7D7;
    border-left: 1px solid #D7D7D7;
    padding: 40px 20px;
    .video_dec {
        padding: 0 0 20px;
        .title {
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            padding-bottom: 10px;
            span {
                color: #333;
                font-size: 12px;
                font-weight: bolder;
            }
        }
        .time {
            color: #999;
            font-size: 12px;
            line-height: 18px;
        }
        .count {
            color: #999;
            font-size: 12px;
            line-height: 18px;
        }
        .desc {
            white-space: pre-wrap;
            line-height: 18px;
            color: #333;
            font-size: 12px;
            margin: 10px 0 0;
        }
    }
    .video_list {
        padding: 0 0 20px;
        .title {
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            padding-bottom: 10px;
            span {
                color: #333;
                font-size: 12px;
                font-weight: bolder;
            }
        }
        ul {
            li {
                width: 200px;
                height: 50px;
                display: flex;
                margin: 0 0 20px;
                .pic {
                    cursor: pointer;
                    position: relative;
                    img {
                        width: 96px;
                        height: 54px;
                    }
                    .mask {
                        width: 100%;
                        height: 18px;
                        background: linear-gradient(to left,#333,transparent);
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    .paly {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        line-height: 18px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        .video {
                            margin-right: 5px;
                            width: 15px;
                            height: 10px;
                            display: inline-block;
                            background: url("@/assets/images/public/icon2.png") no-repeat;
                            background-position: -60px -310px;
                        }
                        .count {
                            padding-right: 5px;
                            font-size: 12px;
                            color: #fff;
                            text-shadow: -2px 1px 1px #333;
                        }
                    }
                }
                .info {
                    width: 100px;
                    height: 50px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 10px;
                    h4 {
                        line-height: 16px;
                        font-size: 12px;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    .time {
                        line-height: 16px;
                        font-size: 12px;
                        color: #999;
                    }
                    .user {
                        line-height: 16px;
                        span {
                            font-size: 12px;
                            color: #666;
                            margin-right: 3px;
                        }
                        a {
                            font-size: 12px;
                            color: #999;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                            }
                            &:last-of-type em{
                                display: none;
                            }
                        }
                    }
                    
                }
            }
        }
    }
    .menu {
        padding: 0 0 20px;
        .title {
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            padding-bottom: 10px;
            span {
                color: #333;
                font-size: 12px;
                font-weight: bolder;
            }
        }
        p {
            height: 20px;
            color: #333;
            font-size: 12px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            &:hover {
                cursor: pointer;
                text-decoration: underline;
            }
        }
    }
    .more {
        .title {
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            padding-bottom: 10px;
            span {
                color: #333;
                font-size: 12px;
                font-weight: bolder;
            }
        }
        .bg {
            height: 48px;
            display: flex;
            align-content: center;
            justify-content: space-between !important;
            margin-bottom: 20px;
            .ios {
                width: 42px;
                height: 48px;
                display: block;
                background: url("@/assets/images/public/sprite.png");
                background-position: 0 -392px;
                &:hover {
                    cursor: pointer;
                    background-position: 0 -472px;
                }
            }
            .pc {
                width: 60px;
                height: 48px;
                display: block;
                background: url("@/assets/images/public/sprite.png");
                background-position: -72px -392px;
                &:hover {
                    cursor: pointer;
                    background-position: -72px -472px;
                }
            }
            .aos {
                width: 42px;
                height: 48px;
                display: block;
                background: url("@/assets/images/public/sprite.png");
                background-position: -163px -392px;
                &:hover {
                    cursor: pointer;
                    background-position: -163px -472px;
                }
            }
        }
        p {
            font-size: 12px;
            color: #999;
        }
    }
}
</style>